<template>
  <div v-loading="!showLoading" style="width: 100%; height: 100%">
    <div class="login-container" v-if="showLoading && !isPhone">
      <div class="login-container-middle">
        <div class="login-container-text">
          <span />
          <p>{{titleA.split('/')[0]}}</p>
          <p v-if="titleA.includes('/')">{{titleA.split('/')[1]}}</p>
        </div>
        <div class="login-container-form">
          <div class="login-container-form-left">
            <div />
            <p>{{titleA.split('/')[0]}}</p>
            <p v-if="titleA.includes('/')">{{titleA.split('/')[1]}}</p>
          </div>
          <div class="login-container-form-right">
            <el-form
              ref="loginRef"
              :model="loginModel"
              :rules="loginRules"
              label-position="left"
            >
              <div class="title-container">
                <h3 class="title">微信绑定</h3>
                <p>第一次登录请绑定您的账号信息</p>
              </div>
              <el-form-item prop="username">
                <el-input
                  v-model="loginModel.username"
                  type="text"
                  placeholder="请输入账号 (账号为你的身份证号)"
                  prefix-icon="el-icon-user"
                  autocomplete="on"
                  clearable
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginModel.password"
                  type="password"
                  placeholder="请输入密码 (密码为身份证后四位)"
                  prefix-icon="el-icon-lock"
                  autocomplete="on"
                  clearable
                  show-password
                />
              </el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                style="
                  width: 100%;
                  border-radius: 30px;
                  height: 60px;
                  margin: 0 auto;
                  margin-bottom: 10px;
                "
                @click.native.prevent="handleLogin"
                >绑定微信</el-button
              >
              <p>
                还没有账号?<a :href="hrefbaoming" class="baomingA">立即报名</a>
              </p>
            </el-form>
          </div>
        </div>
        <div class="cope">
          本系统由<a href="https://www.taijieyun.com" class="lefos">泰捷云学</a
          >提供技术支持
        </div>
      </div>
    </div>
    <div v-if="showLoading && isPhone" style="width: 100%; height: 100%">
      <mobile @mobile="mobileData"></mobile>
    </div>
  </div>
</template>
<script>
import {
  getUserid,
  getUserpassword,
  getAgent,
  setwxopenid,
  getwxstate,
  delwxstate
} from "@/utils/auth";
import { mapGetters } from "vuex";
import mobile from "./mobile.vue";
import axios from 'axios'
import{getcodev2,getopenid} from '@/api/admin.js'
export default {
  name: "Login",
  components: { mobile },
  computed: {
    ...mapGetters(["initObj"]),
  },
  data() {
    return {
      titleA: "",
      loading: false,
      redirect: undefined,
      otherQuery: {},
      verifyShow: false,
      verifySrc: "",
      loginModel: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      obj: {}, //微信
      isLogin: false,
      innerHTMLA: {},
      showLoading: false,
      hrefbaoming:
        window.location.href.slice(0, window.location.href.indexOf(".com")) +
        ".com" +
        this.$platformList,
      isPhone: Boolean(Number(getAgent())), //是手机登录 就是true
      openid: this.$route.query.openid,
    };
  },
 async created() {
    this.$store.dispatch("user/initfunction"); //存入企业名称及id
    this.titleA = this.initObj.alias;
    this.isshowlogJ = JSON.parse(this.initObj.setting).studentHoke
      ? JSON.parse(this.initObj.setting).studentHoke == "开启"
      : false;
      if(this.openid){
        this.loginModel.openid=this.openid
      }
    if (getwxstate()&&getwxstate()!='undefined'&&this.isPhone) {
      getopenid({state:getwxstate()}).then(res=>{
        // this.showLoading = true;
        this.loginModel.openid = res.data.openid
        this.$store.dispatch("user/WxLoginInfo", {openid:this.loginModel.openid}).then((res) => {
          if (res.code != 200) {
            this.showLoading = true;
          } else {
            this.$router.push("/");
          }
        });
      }).catch(res=>{
        this.showLoading = false;
        delwxstate()
        this.$router.push("/loading");
      })
    } else {
      if(!this.isPhone){
        delwxstate()
      }
      if(this.loginModel.openid){
        if(this.isPhone){
          this.$store.dispatch("user/WxLoginInfo", {openid:this.loginModel.openid}).then((res) => {
            if (res.code != 200) {
              this.showLoading = true;
            } else {
              this.$router.push("/");
            }
          });
        }else{
          this.showLoading = true;
        }
      }else{
        this.$router.push("/loading");
      }
      const baseURL =
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ); // 接口地址
      // const { userinfo } = this.$router.currentRoute.query;
      // this.$store.dispatch("user/WxLoginInfo", userinfo).then((res) => {
      //   if (res.code != 200) {
      //     this.showLoading = true;
      //     if (res.err.unionid) {
      //       this.loginModel.unionid = res.err.unionid;
      //     } else {
      //       this.loginModel.openid = res.err.openid;
      //     }
      //   } else {
      //     this.$router.push("/");
      //   }
      // });
    }
    //62ce3ade4c428
    
    // getopenid({state:'62ce3ade4c428'}).then(res=>{
    //   this.showLoading = true;
    //   this.openid = res.data.openid
    //   setwxopenid(this.openid);
    //   this.loginModel.openid = res.data.openid
    // }).catch(res=>{
    //   this.showLoading = false;
    // })
    document.addEventListener("keydown", this.watchEnter);
  },
  watch: {
    $router: {
      handler: function (val) {},
    },
  },
  destroyed() {
    document.removeEventListener("keydown", this.watchEnter);
  },
  methods: {
    //键盘事件
    watchEnter(e) {
      let key = window.event ? e.keyCode : e.which;
      if (key == 13 && !this.loading) {
        this.handleLogin();
      }
    },
    //移动端绑定事件
    mobileData(data) {
      if(!this.loginModel.unionid&&!this.loginModel.openid){
       return this.$toast.fail('该微信绑定的学员账号异常,请联系管理员处理')
      }
      Object.assign(this.loginModel, data);
      this.$store
        .dispatch("user/Wxbind", this.loginModel)
        .then((res) => {
          if (res.code == 200) {
            this.$router.push("/home");
          }
        })
        .catch(() => {});
    },
    // 验证码配置
    // getVerify() {
    //   verify().then(res => {
    //     this.verifyShow = res.data.verify_switch
    //     if (res.data.verify_switch) {
    //       this.verifySrc = res.data.verify_src
    //       this.loginModel.verify_id = res.data.verify_id
    //     }
    //   })
    // },
    // 绑定
    handleLogin() {
      this.$refs["loginRef"].validate((valid) => {
        if (valid) {
          if (!this.openid) {
            this.$store
              .dispatch("user/Wxbind", this.loginModel)
              .then((res) => {
                if (res.code == 200) {
                  this.$router.push("/");
                }
              })
              .catch(() => {});
          } else {
            this.$store
              .dispatch(
                "user/Wxbindservice",
                Object.assign(this.loginModel, { openid: this.openid })
              )
              .then((res) => {
                if (res.code == 200) {
                  this.$router.push("/");
                }
              })
              .catch(() => {});
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "~@/styles/calculation.scss";
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: #000;
  }
}

/* reset element-ui css */
.login-container {
  box-shadow: none;
  .el-input {
    display: inline-block;
    box-shadow: none;
    input {
      // margin-left: 5px;
      background: #fff;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      color: #000;
      caret-color: #000;
      box-shadow: none;
      width: 26vw !important;
      height: 6vh !important;
      border-radius: 30px;
      &:-webkit-autofill {
        box-shadow: none;
        // box-shadow: 0 0 0px 1000px $light_gray inset !important;
        // -webkit-text-fill-color: $cursor !important;
      }
    }
    .el-input__inner {
      padding-left: 40px !important;
    }
    .el-input__prefix {
      font-size: px2rem(18) !important;
      margin-left: 10px;
    }
  }

  .el-form-item {
    border: 1px solid #ddd;
    // background: #fff;
    border-radius: 30px;
    color: #454545;
  }
  .style_change_item {
    border: none;
    width: auto !important;
    margin: 0;
    margin-left: 20px;
    // height: vmh(30);
    margin-top: -10px;
  }
}
@media screen and (max-width: 1360px) {
  .login-container {
    .el-input {
      input {
        width: 340px !important;
        height: 52.5px !important;
      }
    }
  }
}
@media screen and (max-height: 768px) {
  .login-container {
    .el-input {
      input {
        width: 340px !important;
        height: 52.5px !important;
      }
    }
  }
}
@media screen and (max-width: 1205px) {
  .login-container {
    .el-input {
      input {
        width: 300px !important;
        height: 48.5px !important;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@import "~@/styles/calculation.scss";
$bg: url(~@/assets/logo/bg.jpg);
$dark_gray: #889aa4;
$light_gray: #eee;
.el-form-item__error {
  left: 10% !important;
}
.login-container {
  // margin-top:vmh(-50);
  height: 100vh;
  width: 100vw;
  background: $bg;
  background-size: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-container-middle {
    margin-top: -2vh;
    // width: 55vw !important;
    // height: 40vh;
    // min-width:;
    // background: chartreuse;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .login-container-text {
      padding: vmh(36) 0;
      display: flex;
      span {
        padding: 0 vmw(19) 0 0;
        display: inline-block;
        height: vmh(58);
        // background: firebrick;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      p {
        font-size: px2rem(45);
        font-weight: 600;
        font-family: "微软雅黑";
        // background: firebrick;
        display: inline-block;
        color: #fff;
      }
    }
    .login-container-form {
      // margin-top:vmh(36);
      width: 100%;
      height: 52vh;
      // background: url(~@/assets/logo/form-bg.png) no-repeat;
      // background-size: 100% 100%;
      display: flex;
      .login-container-form-left {
        width: 25vw;
        height: 100%;
        // background: chartreuse;
        padding: 50px;
        background: url(~@/assets/logo/form-bg-left.png) no-repeat;
        background-size: 100% 100%;
        div {
          margin-bottom: vmh(16);
          width: vmw(34);
          height: vmh(4);
          background: #fff;
        }
        p {
          color: #fff;
          font-size: px2rem(24);
          font-weight: 400;
          font-family: "Microsoft YaHei";
        }
      }
      .weixin {
        width: 30px;
        img {
          width: 100%;
        }
      }
      .login-container-form-right {
        width: 30vw;
        // background: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url(~@/assets/logo/form-bg-right.png) no-repeat;
        background-size: 100% 100%;

        form {
          height: 100% !important;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          button {
            margin-top: 10px !important;
            height: 54px !important;
          }
          p {
            margin-left: 20px;
            font-size: 14px;
            color: #999999;
            .baomingA {
              color: #0000ee;
              margin-left: 10px;
            }
            .baomingA:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  // .login-form {
  //   position: relative;
  //   width: 520px;
  //   max-width: 100%;
  //   padding: 160px 35px 0;
  //   margin: 0 auto;
  //   overflow: hidden;
  // }

  .title-container {
    position: relative;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    p {
      margin: 0;
      display: flex;
      color: #f00 !important;
    }
    .title {
      font-size: px2rem(24);
      color: #1677ff;
      text-align: center;
      font-weight: bold;
      margin: 0 auto;
    }
  }
}
::v-deep {
  .iframe {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    #WeChatLogin {
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    // iframe{
    //   width:auto !important;
    //   height: auto !important;
    // }
  }
}
@media screen and (max-width: 1360px) {
  .title-container {
    .title {
      font-size: 18px !important;
    }
  }
  .el-input {
    input {
      width: 340px !important;
      height: 52.5px !important;
    }
  }
}
@media screen and (max-height: 768px) {
  .title-container {
    .title {
      font-size: 18px !important;
    }
  }
  .el-input {
    input {
      width: 340px !important;
      height: 52.5px !important;
    }
  }
}
@media screen and (max-width: 1080px) {
  .login-container {
    width: 1080px !important;
    .login-container-form-left {
      width: 270px !important;
      height: 306.8px !important;
      p {
        font-size: 14px !important;
      }
    }
    .login-container-form-right {
      width: 324px !important;
      height: 306.8px !important;
      form {
        button {
          margin-bottom: 10px !important;
          height: 50px !important;
        }
      }
    }
    .login-container-form-left div {
      margin-bottom: 16px;
      width: 34px !important;
      height: 4px !important;
    }
    .login-container-text {
      padding: 36px 0 !important;
      p {
        font-size: 30px !important;
      }
    }
  }
  ::v-deep {
    .iframe {
      iframe {
        width: 270px !important;
        height: 306.8px !important;
        .qrcode {
          width: 150px !important;
        }
      }
    }
  }
}

@media screen and (max-height: 680px) {
  .login-container
    .login-container-middle
    .login-container-form
    .login-container-form-right {
    form {
      button {
        margin-bottom: 10px !important;
        height: 50px !important;
      }
      p {
        margin-bottom: 10px !important;
      }
    }
  }
}
@media screen and (max-height: 590px) {
  .login-container {
    height: 590px !important;
    .login-container-form-right {
      height: 306.8px !important;
      width: 324px !important;
    }
    .login-container-form-left {
      width: 270px !important;
      height: 306.8px !important;
      p {
        font-size: 14px !important;
      }
    }
    .login-container-form-left div {
      margin-bottom: 16px;
      width: 34px !important;
      height: 4px !important;
    }
    .login-container-text {
      padding: 36px 0 !important;
      p {
        font-size: 30px !important;
      }
    }
  }
}
.cope {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #eee;
  position: relative;
  margin-top: 3rem;
  .lefos {
    color: #0000ee;
  }
}
</style>
